<template>
	<div>
        <div id="comment_header">
            <span v-for="t in types" :key="t.id"
            :class="{colored: typeId == t.id}"
            @click="typeChange(t.id)">
                <p>{{t.title}}</p>
                <p>0</p>
            </span>
        </div>
        <div style="marginTop: 1.4rem">
            <div class="comment-wrapper" v-for="(comment,i) in commentList"
            :key="i">
                <Comment :comment="comment" type="complete"></Comment>
            </div>
        </div>
        <div class="middle-loading-tip" v-show="page1Loading">加载中…</div>
        <div class="nothing-tip" v-show="!commentList.length && !page1Loading">暂无任何数据</div>
        <LoadMore :bottomMethod="toBottom" :allLoaded="allLoaded && page>1"></LoadMore>   
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
import LoadMore from '@/components/LoadMore'
import Comment from '@/components/Comment'
export default{
    name:'GoodsComment',
    created(){
		this.preGoodsId = this.$route.params.preGoodsId
		this.firstPage()
    },
    data(){
        return {
            preGoodsId:'',
            types:[{
                title: '全部',
                id: 1
            },{
                title: '好评',
                id: 2
            },{
                title: '中评',
                id: 3
            },{
                title: '差评',
                id: 4
            },{
                title: '晒图',
                id: 5
            }],
            typeId: 1,
            page: 0,
            page1Loading: false,
            allLoaded: false
        }
    },
     computed:{
        ...mapGetters({
            commentInfo: 'goods/commentInfo',
            commentList: 'goods/commentList',
        }),
     },
    methods:{
         ...mapActions({
            getGoodsComments: 'goods/getGoodsComments'
        }),
        async firstPage(){
            this.page1Loading = true
            await this.nextPage()
            this.page1Loading = false            
        },
        async nextPage(){
            this.page++
            const list = await this.getGoodsComments({
                preGoodsId: this.preGoodsId,
                type: this.typeId,
                page: this.page
            })
            if(!list.length && this.page > 1) this.allLoaded = true
            console.log(`page: ${this.page}, type: ${this.typeId}`)      
        },
        async toBottom(){
            await this.nextPage()
        },
        typeChange(typeId){
            this.typeId = typeId
            this.$store.commit('goods/clearComment')
            this.page = 0
            this.allLoaded = false
            this.firstPage()
        }
    },
    components: {LoadMore, Comment}
}
</script>
<style lang='less' scoped>
#comment_header{
    width: 100%;
    border-bottom: 1px solid #ddd;
    display: table;
    background: #fff;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    span{
        width: 20%;
        display: table-cell;
        height: 1.17rem;
        font-size: .32rem;
        text-align: center;
        vertical-align: middle;
    }
}
.comment-wrapper{
    margin-top: .26rem;
    width: 100%;
    padding: 0rem .3rem;
    background: #fff;
}
</style>